<template>
  <div>
    <div><h1>商品明细</h1></div>
    <div>
      <el-descriptions title="商品信息">
        <el-descriptions-item label="商品Id">{{ prodId }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{
          prod.prodName
        }}</el-descriptions-item>
        <el-descriptions-item label="SPU">{{
          prod.prodSpu
        }}</el-descriptions-item>
        <el-descriptions-item label="图片">
          <el-image style="width: 50px; height: 50px" :src="prod.prodImage" />
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ prod.createTime }}
        </el-descriptions-item>
      </el-descriptions>
      <el-button type="success" @click="onAddProdInfo">添加</el-button>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="infoId" label="序号" />
        <el-table-column prop="prodSku" label="SKU" />
        <el-table-column prop="prodName" label="名称" />
        <el-table-column prop="createTime" label="时间" />
        <el-table-column label="操作">
          <el-button type="danger">删除</el-button>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          v-model:current-page="pageFrom.pageNum"
          v-model:page-size="pageFrom.pageSize"
          :page-sizes="[2, 4, 6, 8]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 添加 -->
    <div>
      <el-dialog v-model="dialogFormVisible" title="添加商品SKU" width="500">
        <el-form :model="form">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input v-model="form.prodName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品SKU" :label-width="formLabelWidth">
            <el-input v-model="form.prodSku" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品成本价" :label-width="formLabelWidth">
            <el-input v-model="form.costPrice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品售价" :label-width="formLabelWidth">
            <el-input v-model="form.prodPrice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="商品库存" :label-width="formLabelWidth">
            <el-input v-model="form.prodStock" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="saveProdInfo"> 保存 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { getProd, getProdInfoList, addProdInfo } from "@/api/prod";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { fa } from "element-plus/es/locales.mjs";

const route = useRoute();
const prodId = route.params.prodId;
const tableData = ref([]);
const total = ref(0);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

const form = ref({
  costPrice: 0,
  createBy: "",
  createTime: "",
  infoId: 0,
  num: 0,
  prodId: null,
  prodName: "",
  prodPrice: 0,
  prodSku: "",
  prodStock: 0,
  updateBy: "",
  updateTime: "",
});
const pageFrom = ref({
  pageNum: 1,
  pageSize: 2,
  prodId: prodId,
});

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);

  pageFrom.value.pageSize = val;
  loadProdInfoList();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  pageFrom.value.pageNum = val;
  loadProdInfoList();
};
const onAddProdInfo = () => {
  form.value = {
    costPrice: 0,
    createBy: "",
    createTime: "",
    infoId: 0,
    num: 0,
    prodId: null,
    prodName: "",
    prodPrice: 0,
    prodSku: "",
    prodStock: 0,
    updateBy: "",
    updateTime: "",
  };
  form.value.prodId = prodId;
  dialogFormVisible.value = true;
};
const prod = ref({
  prodSpu: "",
  prodKind: null,
  prodType: null,
  prodStatus: null,
  prodName: "",
  brandId: null,
  createBy: "",
  createTime: "",
  updateBy: null,
  updateTime: null,
  appr: "",
  prodImage: "",
});
const saveProdInfo = () => {
  addProdInfo(form.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("添加成功");
      dialogFormVisible.value = false;
      loadProdInfoList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

//列表
const loadProdInfoList = () => {
  pageFrom.value.prodId = prodId;
  getProdInfoList(pageFrom.value).then((res) => {
    tableData.value = res.data.data.records;
    total.value = res.data.data.total;
  });
};

onMounted(() => {
  loadProdInfoList();
  getProd(prodId).then((res) => {
    prod.value = res.data.data;
  });
});
</script>

<style scoped></style>
